<template>
  <div>
      <h1>我是子组件</h1> 
       <h1>{{msg}}</h1>
       <h1>{{age}}</h1>
       <h1 v-for="item in list" :key="item">{{item}}</h1>
       <hr>
       <button @click="toSend">传id</button>
        <button @click="toName">传name</button>
        <h1>接收兄弟的值：{{mykey}}</h1>
  </div>
</template>

<script setup>
import {ref,defineProps,defineEmits} from 'vue'
import mitt from '@/utils/mitt'
  //接收兄弟组件传来的值
     let mykey=ref()
    mitt.on('sendKey',(keygen)=>{
      console.log(keygen,"接收到兄弟组件的值")
      mykey.value=keygen;
    })


// vue3 语法糖的写法 父传子

// defineProps 使用来定义父传子的props的属性的方法
  // 写法1 数组类型
  // let props=defineProps(["msg","list","age"]);
  //  console.log(props.msg)
  // 写法2
      let {msg,age,list}=defineProps({
        msg:{
          type:String,
          default:"消息"
        },
        age:{
          type:Number,
          required:true //必传属性
        },
        list:{
          type:Array,
          default:()=>[]
        }
      })

  // 在js 中访问 使用 父传子的数据 可以解构使用
      console.log(msg)
      console.log(age)
      console.log(list)
  
//defineEmits vue3的子传父方法 自定定义事件传值
    let emits=defineEmits(["sendId","sendName"])

    let myid=ref(666)

   let toSend=()=>{
    // 触发自定义事件 并传值
       emits("sendId",myid.value)
   }

   let myname=ref("张三");
   let toName=()=>{
       emits("sendName",myname.value)
   }

</script>